"use client"

import { useState, useEffect } from "react"
import { View, Text, StyleSheet, TouchableOpacity, StatusBar } from "react-native"
import { ArrowLeft } from "lucide-react-native"
import { useRouter, useLocalSearchParams } from "expo-router"
import { theme } from "../constants/theme"
import { LinearGradient } from "expo-linear-gradient"
import { SafeAreaView } from "react-native-safe-area-context"
import BasicVowelsTab from "@/components/natural-reading/BasicVowelsTab"
import BasicConsonantsTab from "@/components/natural-reading/BasicConsonantsTab"
import LetterCombinationsTab from "@/components/natural-reading/LetterCombinationsTab"

type TabType = "基础元音" | "基础辅音" | "字母组合"

export default function NaturalReadingScreen() {
    const router = useRouter()
    const params = useLocalSearchParams()
    const [activeTab, setActiveTab] = useState<TabType>("基础元音")
    const [bookTitle, setBookTitle] = useState<string>("自然拼读")

    // Get book title from params
    useEffect(() => {
        if (params.bookTitle) {
            setBookTitle(params.bookTitle as string)
        }
    }, [params])

    const handleBack = () => {
        router.back()
    }

    const handleTabPress = (tab: TabType) => {
        setActiveTab(tab)
    }

    // Render current tab content
    const renderTabContent = () => {
        switch (activeTab) {
            case "基础元音":
                return <BasicVowelsTab />
            case "基础辅音":
                return <BasicConsonantsTab />
            case "字母组合":
                return <LetterCombinationsTab />
            default:
                return <BasicVowelsTab />
        }
    }

    return (
        <SafeAreaView style={styles.container} edges={["top"]}>
            <StatusBar barStyle="dark-content" />
            <LinearGradient
                colors={theme.colors.neutral.backgroundGradient}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
                style={styles.gradientBackground}
            >
                {/* Fixed header and tabs */}
                <View style={styles.fixedHeader}>
                    {/* Header */}
                    <View style={styles.header}>
                        <TouchableOpacity onPress={handleBack} style={styles.backButton}>
                            <ArrowLeft size={24} color={theme.colors.neutral.black} />
                        </TouchableOpacity>
                        <Text style={styles.headerTitle}>{bookTitle}</Text>
                        <View style={{ width: 40 }} />
                    </View>

                    {/* Tabs */}
                    <View style={styles.tabContainer}>
                        <View style={styles.tabBackground}>
                            {(["基础元音", "基础辅音", "字母组合"] as TabType[]).map((tab) => (
                                <TouchableOpacity
                                    key={tab}
                                    style={[styles.tab, activeTab === tab && styles.activeTab]}
                                    onPress={() => handleTabPress(tab)}
                                >
                                    <Text style={[styles.tabText, activeTab === tab && styles.activeTabText]}>{tab}</Text>
                                </TouchableOpacity>
                            ))}
                        </View>
                    </View>
                </View>

                {/* Content area */}
                <View style={styles.contentContainer}>{renderTabContent()}</View>
            </LinearGradient>
        </SafeAreaView>
    )
}

const styles:any = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    gradientBackground: {
        flex: 1,
    },
    fixedHeader: {
        backgroundColor: theme.colors.neutral.background,
        borderBottomWidth: 1,
        borderBottomColor: "rgba(0, 0, 0, 0.05)",
        zIndex: 10,
        shadowColor: "rgba(0,0,0,0.1)",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.5,
        shadowRadius: 4,
        elevation: 4,
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
    },
    backButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.8)",
        shadowColor: "rgba(0,0,0,0.1)",
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.8,
        shadowRadius: 1,
        elevation: 1,
    },
    headerTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        flex: 1,
        textAlign: "center",
    },
    tabContainer: {
        paddingHorizontal: theme.spacing.lg,
        paddingBottom: theme.spacing.md,
    },
    tabBackground: {
        flexDirection: "row",
        borderRadius: theme.borderRadius.large,
        padding: 4,
        height: 44,
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        shadowColor: "rgba(0,0,0,0.05)",
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 1,
        shadowRadius: 2,
        elevation: 1,
    },
    tab: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        borderRadius: theme.borderRadius.large - 4,
        height: 36,
    },
    activeTab: {
        backgroundColor: theme.colors.neutral.white,
        shadowColor: "rgba(0,0,0,0.1)",
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.5,
        shadowRadius: 2,
        elevation: 2,
    },
    tabText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.medium,
        opacity: 0.7,
    },
    activeTabText: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
        opacity: 1,
    },
    contentContainer: {
        flex: 1,
    },
})

